<template>
<!-- 搜索页 -->
  <div class="search">
    <!-- 搜索框 -->
    <div class="searchKuang">
      <form action="/" >
        <van-search shape="round"
          show-action
          placeholder="请输入搜索关键词"
          @cancel="onCancel"
        />
      </form>
    </div>
    <!-- bar导航条 -->
    <div class="bar">
      <van-tabs scrollspy sticky color="transparent" title-active-color="#72C7C6">
        <van-tab v-for="(value, index) in optionDate" :title="value.title" :key="index">
          <template v-if="1 === index">
            <!-- passage -->
            <router-link to="/home/talk">
                <div class="passage">
                <h4>文章</h4>
                <div class="passageContent">
                  <!-- 图片加用户名 -->
                  <div class="passageContentLeft">
                    <!-- 大图片 -->
                    <img src="../../../assets/images/search/文章图片@2x.png">
                    <div class="touxyonghu">
                      <!-- 头像 -->
                      <div class="touxiang"><img src="../../../assets/images/search/文章头像@2x.png"></div>
                      <!-- 用户名 -->
                      <div class="yonghu">柳下戏鱼</div>
                    </div>
                  </div>
                  <!-- 文字 -->
                  <div class="passageRight">
                    <!-- 文字上 -->
                    <div class="passageRight1">抄作业 | 以<span class="lanse">视黄醇</span>为主的routine参考</div>
                    <!-- 文字下 -->
                    <div class="passageRight2">一套高效全面护肤方案</div>
                    <div class="passageRight3">
                      <!-- 点赞 -->
                      <span class="passageRight3Span1"><img class="img1" src="../../../assets/images/search/点赞@2x.png">&nbsp;&nbsp;345</span>
                      <!-- 评论 -->
                      &nbsp;&nbsp;
                      <span><img class="img2" src="../../../assets/images/search/评论@2x.png">&nbsp;&nbsp;301</span>
                    </div>
                  </div>
                </div>
                <div class="passageContent">
                  <!-- 图片加用户名 -->
                  <div class="passageContentLeft">
                    <!-- 大图片 -->
                    <img src="../../../assets/images/search/文章图片@2x.png">
                    <div class="touxyonghu">
                      <!-- 头像 -->
                      <div class="touxiang"><img src="../../../assets/images/search/文章头像@2x.png"></div>
                      <!-- 用户名 -->
                      <div class="yonghu">风花雪月</div>
                    </div>
                  </div>
                  <!-- 文字 -->
                  <div class="passageRight">
                    <!-- 文字上 -->
                    <div class="passageRight1">科普 | 大热得成分"<span class="lanse">视黄醇</span>",到底那种最有效？</div>
                    <!-- 文字下 -->
                    <div class="passageRight2">主打HPR、<span class="lanse">视黄醇</span>、视黄醛、视黄脂的产品 ， 该选那个呢？</div>
                    <div class="passageRight3">
                      <!-- 点赞 -->
                      <span class="passageRight3Span1"><img class="img1" src="../../../assets/images/search/点赞@2x.png">&nbsp;&nbsp;100</span>
                      <!-- 评论 -->
                      &nbsp;&nbsp;
                      <span><img class="img2" src="../../../assets/images/search/评论@2x.png">&nbsp;&nbsp;77</span>
                    </div>
                  </div>
                </div>
                <div class="passageContent">
                  <!-- 图片加用户名 -->
                  <div class="passageContentLeft">
                    <!-- 大图片 -->
                    <img src="../../../assets/images/search/文章图片@2x.png">
                    <div class="touxyonghu">
                      <!-- 头像 -->
                      <div class="touxiang"><img src="../../../assets/images/search/文章头像@2x.png"></div>
                      <!-- 用户名 -->
                      <div class="yonghu">晨安睡不醒</div>
                    </div>
                  </div>
                  <!-- 文字 -->
                  <div class="passageRight">
                    <!-- 文字上 -->
                    <div class="passageRight1">抄作业 | 以<span class="lanse">视黄醇</span>为主的routine参考</div>
                    <!-- 文字下 -->
                    <div class="passageRight2">一套高效全面护肤方案</div>
                    <div class="passageRight3">
                      <!-- 点赞 -->
                      <span class="passageRight3Span1"><img class="img1" src="../../../assets/images/search/点赞@2x.png">&nbsp;&nbsp;166</span>
                      <!-- 评论 -->
                      &nbsp;&nbsp;
                      <span><img class="img2" src="../../../assets/images/search/评论@2x.png">&nbsp;&nbsp;100</span>
                    </div>
                  </div>
                </div>
                <!-- 更多 -->
                <div class="moreComment">更多相关文章&nbsp;></div>
              </div>
            </router-link>
            
          </template>
          <router-link to="/home/talk">
            <template v-if="2 === index">
              <!-- 话题 -->
              <div class="talk">
                <h4>话题</h4>
                <div class="talkContent" v-for="(value, index) in huati" :key="index">
                  <span style="color: #78CCCD; font-size: 14px">#</span>
                  <span style="color: #010101; font-size: 13px;font-weight:bold;">&nbsp;{{value.title}}</span>
                  <span style="color: #AFAFAF; font-size:10px;">&nbsp;&nbsp;&nbsp;{{value.count}}条讨论</span>
                </div>
                <div class="moreComment">更多相关话题&nbsp;></div>
              </div>
            </template>
          </router-link>
          
          <template v-if="3 === index">
            <!-- 帖子 -->
            <div class="tiezi">
              <h4>帖子</h4>
              <div class="tieziContent" v-for="(value, index) in tiezi" :key="index">
                <!-- 图片加用户名 -->
                <div class="tieziContentLeft">
                  <div style="color: #68DCDC; font-size: 14px; margin-top: 10px; font-weight: bold">{{ value.title }}</div>
                  <div style="color: #BDBDBD; font-size: 14px; margin-top: 10px;"># {{ value.content }}</div>
                </div> 
                <!-- 文字 -->
                <div class="tieziRight">
                  <div class="touxyonghu">
                    <!-- 头像 -->
                      <div class="touxiang"><img src="../../../assets/images/search/文章头像@2x.png"></div>
                      <!-- 用户名 -->
                      <div class="yonghu">{{ value.name }}</div>
                  </div>
                  <div class="tieziRight3">
                    <!-- 点赞 -->
                    <span  @click="dianzan(value)" class="tieziRight3Span1"><img class="img1" src="../../../assets/images/search/点赞@2x.png">&nbsp;&nbsp;{{ value.zan}}</span>
                    <!-- 评论 -->
                    &nbsp;&nbsp;
                    <span><img class="img2" src="../../../assets/images/search/评论@2x.png">&nbsp;&nbsp;{{ value.commit }}</span>
                  </div>   
                </div>
              </div>
              <div class="moreComment">更多相关帖子&nbsp;></div>
            </div>
          </template>
          <template v-if="4 === index">
            <router-link to="/detail">
                <!-- 产品 -->
              <div class="passage">
                <h4>产品</h4>
                <div class="passageContent">
                  <!-- 图片加用户名 -->
                  <div class="passageContentLeft">
                    <!-- 大图片 -->
                    <img src="../../../assets/images/search/产品图@2x.png">
                  </div>
                  <!-- 文字 -->
                  <div class="passageRight">
                    <!-- 文字上 -->
                    <div class="passageRight1">洛克RoC维A抗皱眼霜</div>
                    <!-- 文字下 -->
                    <div class="passageRight2">RoC Retinol Correxion Eye Cream</div>
                    <div class="passageRight3">
                      <!-- 国家-->
                      <span>美国</span><span>￥ 140/ 15ml</span>
                    </div>
                  </div>
                </div>
                <div class="passageContent">
                  <!-- 图片加用户名 -->
                  <div class="passageContentLeft">
                    <!-- 大图片 -->
                    <img src="../../../assets/images/search/产品图@2x.png">
                  </div>
                  <!-- 文字 -->
                  <div class="passageRight">
                    <!-- 文字上 -->
                    <div class="passageRight1">洛克RoC维A抗皱眼霜</div>
                    <!-- 文字下 -->
                    <div class="passageRight2">RoC Retinol Correxion Eye Cream</div>
                    <div class="passageRight3">
                      <!-- 国家-->
                      <span>美国</span><span>￥ 140/ 15ml</span>
                    </div>
                  </div>
                </div>
                <div class="passageContent">
                  <!-- 图片加用户名 -->
                  <div class="passageContentLeft">
                    <!-- 大图片 -->
                    <img src="../../../assets/images/search/产品图@2x.png">
                  </div>
                  <!-- 文字 -->
                  <div class="passageRight">
                    <!-- 文字上 -->
                    <div class="passageRight1">洛克RoC维A抗皱眼霜</div>
                    <!-- 文字下 -->
                    <div class="passageRight2">RoC Retinol Correxion Eye Cream</div>
                    <div class="passageRight3">
                      <!-- 国家-->
                      <span>美国</span><span>￥ 140/ 15ml</span>
                    </div>
                  </div>
                </div>
                <!-- 更多 -->
                <div class="moreComment">更多相关产品&nbsp;></div>
              </div>
            </router-link>
            
          </template>
          <template v-if="5 === index">
            <!-- 成分 -->
            <div class="ingredent">
              <h4>成分</h4>
              <div class="ingredentContent" v-for="(value, index) in ingredent" :key="index">
                <!-- 第一行 -->
                <div class="ingredent1">
                  <span style="color: #68DCDC; font-size: 14px;">{{ value.title }}</span>
                  <span style="color: #333333; font-size: 14px;">{{ value.title1 }}</span>
                </div>
                <!-- 第二行 -->
                <div class="ingredent2">
                  <span>{{ value.yinwen }}</span>
                </div>
                <!-- 第三行 -->
                <div class="ingredent3">
                  <span>{{ value.titlezuoyong.titlezuoyong1 }}</span>
                  <span>{{ value.titlezuoyong.titlezuoyong2 }}</span>
                  <span>{{ value.titlezuoyong.titlezuoyong3 }}</span>
                </div>
              </div>
              <!-- 更多相关成分 -->
              <div class="moreComment">更多相关成分&nbsp;></div>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  setup() {
    
  },
  data() {
    return {
      optionDate: [
        {
          title: "全部",
          num: 1,
        },
        {
          title: "文章",
          num: 2,
        },
        {
          title: "话题",
          num: 3,
        },
        {
          title: "帖子",
          num: 4,
        },
        {
          title: "产品",
          num: 5,
        },
      ],
      huati: [
        {
          title: '适合油皮的眼霜推荐',
          count: '39.1k',
        },
        {
          title: '大油田也别作死,过度清洁会烂脸',
          count: '1671',
        },
        {
          title: '脸上爱出油，吸油纸还是保湿喷雾',
          count: '1877',
        },
      ],
      tiezi: [
        {
          title: '视黄醇',
          content: '孕妇禁用的护肤品和化妆品成分',
          name: '晨安睡不醒',
          zan: 144,
          commit: 100,
        },
        {
          title: '敏感肌',
          content: '敏感肌能做光子嫩肤吗？越做越严重吗？',
          name: '夏天睡不醒',
          zan: 166,
          commit: 120,
        },
        {
          title: '美白舱',
          content: '你离白成一道光，就差一个美白舱',
          name: '秋天睡不醒',
          zan: 199,
          commit: 168,
        },
      ],
      ingredent: [
        {
          title: '视黄醇',
          title1: '丙酸酯',
          yinwen: 'RETINYL PROPIONATE',
          titlezuoyong: {
            titlezuoyong1: '抗衰老',
            titlezuoyong2: '美白祛斑',
            titlezuoyong3: '抗氧化剂',
          }
        },
        {
          title: '甘油',
          title1: '乙醇',
          yinwen: 'LAKELAB SKIN',
          titlezuoyong: {
            titlezuoyong1: '去角质',
            titlezuoyong2: '美白祛斑',
            titlezuoyong3: '成膜剂',
          }
        },
        {
          title: '角鲨烷',
          title1: '硬脂醇',
          yinwen: 'KIEHL SINCE',
          titlezuoyong: {
            titlezuoyong1: '保湿',
            titlezuoyong2: '抗衰老',
            titlezuoyong3: '抗炎剂',
          }
        },
      ],
    }
  },
  methods: {
    onCancel() {
      this.$router.go(-1);
    },
    dianzan(value) {
      console.log(1);
      console.log(value.zan++)
    }
  },
}
</script>

<style lang="less">
// 更多公告得部分
.moreComment {
  width: 100%;
  height: 37px;
  border:#F1F1F1 1px solid;
  font-size: 14px;
  font-family: PingFang;
  font-weight: bold;
  color: #919191;
  line-height: 37px;
  text-align: center;
}
// h4公共属性
h4 {
  font-size: 20px;
  font-family: PingFang;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px;
}
.search {
  width: 100%;
  margin-bottom: 250px;
  // height: 1500px;
  // background: red;
  // 选项
  .bar {
    width: 100%;
    margin-top: 10px;
    .van-sticky {
      border-top: 1px solid #F1F1F1;
      border-bottom: 1px solid #F1F1F1;
      // width: 58px;
      // height: 29px;
      .van-tab {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 800;
        color: #929292
      }
      
    }
  }
  .passage {
    width: 100%;
    padding: 0 10px;
    // background: orange;
    margin-top: 20px;
    .passageContent {
      width:350px;
      height: 100px;
      margin-top: 10px;
      border-bottom: #F1F1F1 1px solid;
      // border: black 1px solid;
      display: flex;
      &:last-child {
        border: none;
      }
      // padding-bottom: 10px;
      .passageContentLeft {
        width: 100px;
        // height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img {
          width: 83px;
          height: 54px;
          // margin-top: -25px;
        }
        .touxyonghu {
          width: 100px;
          height: 25px;
          line-height: 25px;
          display: flex;
          .touxiang {
            width: 15px;
            height: 15px;
            margin-right: 8px;
            // margin-top: -3px;
            img {
              width: 100%;
              height: 100%;
            };
          }
          .yonghu {
            font-size: 12px;
            font-family: PingFang;
            font-weight: bold;
            color: #6D6D6D;
          }
        }
      }
      .passageRight {
        width: 255px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        position: relative;
        .passageRight1 {
          font-size: 13px;
          font-family: PingFang;
          font-weight: bold;
          color: #343434;
          span {
            color: #72C7C6;
          }
        }
        .passageRight2 {
          color: #8B8B8B;
          font-size: 12px;
          font-family: PingFang;
          font-weight: bold;
          margin-top: 5px;
        }
        .passageRight3 {
          width: 120px;
          height: 25px;
          position: absolute;
          right: 0;
          bottom: 0;
          // border: #000000 1px solid;
          font-size: 10px;
          font-weight: bold;
          color: #B9B9B9;
          .img1 {
            width: 14.25px;
            height: 14.5px;
          }
          .img2 {
            width: 12px;
            height: 12px;
          }
        }
      }
    }
  }
  // 话题
  .talk {
    width: 100%;
    padding: 0 10px;
    // background: orange;
    margin-top: 20px;
    .talkContent {
      width: 100%;
      height: 20px;
      line-height: 20px;
      margin: 15px 0;
    }
  }
  // 帖子
  .tiezi {
    width: 100%;
    padding: 0 10px;
    // background: orange;
    margin-top: 20px;
    h4 {
      font-size: 20px;
      font-family: PingFang;
      font-weight: bold;
      color: #000000;
      margin-bottom: 20px;
    }
    .tieziContent {
      width:350px;
      height: 100px;
      margin-top: 10px;
      border-bottom: #F1F1F1 1px solid;
      // border: black 1px solid;
      // display: flex;
      // padding-bottom: 10px;
      .tieziContentLeft {
        // width: 180px;
        height: 70px; 
      }
      .tieziRight {
        width: 100%;
        display: flex;
        justify-content: space-between;
        // position: relative;
        .touxyonghu {
          width: 120px;
          height: 25px;
          line-height: 25px;
          display: flex;
          .touxiang {
            width: 15px;
            height: 15px;
            margin-right: 8px;
            // margin-top: -3px;
            img {
              width: 100%;
              height: 100%;
            };
          }
          .yonghu {
            font-size: 12px;
            font-family: PingFang;
            font-weight: bold;
            color: #6D6D6D;
          }
        }
        .tieziRight3 {
            height: 25px;
            line-height: 25px;
            font-size: 10px;
            font-family: DIN;
            font-weight: bold;
            color: #B9B9B9;
            margin-left: -10px;
            .img1 {
              width: 14.25px;
              height: 14.5px;
            }
            .img2 {
              width: 12px;
              height: 12px;
            }
          }
      }
    }
  }
  // 成分
  .ingredent {
    width: 100%;
    padding: 0 10px;
    // background: orange;
    margin-top: 20px;
    .ingredentContent {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-bottom: #F1F1F1 1px solid;
      margin: 5px 0;
      .ingredent1 {
        width: 100%;
        height: 27px;
        font-weight: bold;
      }
      .ingredent2 {
        width: 100%;
        height: 27px;
        color:#999999;
        font-size: 10px;
      }
      .ingredent3 {
        width: 100%;
        height: 27px;
        display: flex;
        span {
          display: block;
          width: 70px;
          height: 23px;
          font-size: 12px;
          text-align: center;
          line-height: 23px;
          color: #68DCDC;
          border: #68DCDC 1px solid;
          border-radius: 11px;
          &:nth-child(2) {
            margin: 0 6px;
          }
        }
      }
    }
    
  }
}
</style>